<template>
  <div  :style="{'width':width+'px','height':height+'px' || width / 2+'px'}" class="box">
      <ul ref="ul" :style="{'height':height+'px','left':px+'px'}"  class="uls">
          <li class="lis" :style="{'width':width+'px','height':height+'px'}" v-for=" (item,index) in imgList" :key="index">

            <a href="">  <img :src="item.imgUrl" alt="短发短发"></a>
          </li>

      </ul>
      <span class="diandiv" :style="{'left':width / 2 -(6 * imgList.length-1 )+ 'px','bottom':height/8+'px'}"   ><i class="i" :class="{'activ':ind == inde}"  v-for="(i,ind) in imgList.length " :key="ind" @mouseenter="stop"  @mouseleave="start"   @click="dianFn(ind)"></i></span>
      <span @mouseenter="stop"  @mouseleave="start" :style="{'top':height / 2 -14 + 'px'}" @click="lefeFn" class="lefe jiantou">➡️</span>
      <span @mouseenter="stop"  @mouseleave="start" :style="{'top':height / 2 -14 + 'px'}" @click="subFn" class="ref jiantou">⬅️</span>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
export default {
  name: 'lbt',
  props: {
    imgList: {
      type: Array,
      default: () => []

    },
    width: {
      type: String,
      default: '400'
    },
    height: {
      type: String,
      default: null

    }
  },
  setup (props, context) {
    const inde = ref(0)
    const px = computed(() => {
      return -props.width * inde.value
    })
    onMounted(() => {
      auto()
    })
    // 右箭头
    const lefeFn = () => {
      if (inde.value >= props.imgList.length - 1) {
        return
      }
      inde.value++
    }
    // 左箭头
    const subFn = () => {
      if (inde.value < 1) {
        return
      }
      inde.value--
    }
    // 点点控制
    const dianFn = (ind) => {
      inde.value = ind
    }
    // 暂停轮播
    const stop = () => {
      if (times.value) clearInterval(times.value)
    }
    // 自动

    const times = ref(null)
    const auto = () => {
      clearInterval(times.value)
      times.value = setInterval(() => {
        if (inde.value >= props.imgList.length - 1) {
          context.emit('add')
          inde.value = 0
          return
        }
        inde.value++
      }, 3000)
    }
    const start = () => {
      auto()
    }
    watch(inde, (b, c) => {
      if (inde.value === 0 && props.imgList) {
        // props.imgList.push(props.imgList[props.imgList.length])
      }
    })
    return {
      px,
      lefeFn,
      subFn,
      dianFn,
      inde,
      auto,
      stop,
      start

    }
  }
}
</script>

<style lang="less">

.lis {
list-style: none;
background-color:red;
display: inline-block;

}
.lefe{
    position: absolute;
    right: 0;
    top: 0px;
}
.ref{
     position: absolute;
    left: 0px;
    top: 0px;
}
 .jiantou{
   opacity: 0;
   transition:  all .5s;
 }
.box {
overflow: hidden;
position: relative;
  &:hover {
      .jiantou{
        opacity: 1;
      }

    }
}
img{
width: 100%;
height: 100%;
transform: translateX();
}
.uls{
    display: flex;
    position: absolute;
    left: 0px;
    top: 0px;

    transition: all .5s;

}
.i{
  display: inline-block;
margin-left: 8px;
width: 13px;
height: 13px;
border-radius: 50%;
background-color: rgb(212, 204, 204);

 i{
     margin-left: 5px;
 }
}
.activ {
  background-color: #fff;
}
.diandiv{
  position: absolute;
  bottom: 20px;
  left: 0px;
}
</style>
